<!--
 * @Author: 小花
 * @Date: 2022-05-24 22:19:50
 * @LastEditors: 小花
 * @LastEditTime: 2022-05-24 22:45:43
 * @FilePath: /permission_client/src/views/404View.vue
 * @Description: 404
-->
<template>
  <div class="box">
    <div class="logo">
    </div>
    <div class="info">
      <span>
        <svg t="1653402148502" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="2938" width="64" height="64">
          <path
            d="M851.2 441.6l-320-268.8C524.8 172.8 518.4 172.8 512 172.8s-12.8 0-19.2 6.4l-320 268.8C166.4 448 160 460.8 160 467.2L160 832c0 19.2 12.8 32 32 32l640 0c19.2 0 32-12.8 32-32L864 467.2C864 460.8 857.6 448 851.2 441.6zM806.4 806.4 601.6 806.4l0-147.2c0-51.2-38.4-89.6-89.6-89.6s-89.6 38.4-89.6 89.6l0 147.2L217.6 806.4 217.6 480 512 236.8l294.4 243.2L806.4 806.4z"
            p-id="2939">
          </path>
        </svg>
        <router-link to="/">返回首页</router-link>
      </span>
      <span>
        <svg t="1653402558873" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="6285" width="64" height="64">
          <path
            d="M849.724 596.322v84.322c0 4.801-1.512 9.101-3.632 13.053-0.169 0.321 0.045 0.685-0.135 1-0.601 1.046-1.585 1.67-2.299 2.608-1.187 1.563-2.339 3.041-3.817 4.323-1.372 1.192-2.844 2.075-4.396 2.968-1.552 0.899-3.047 1.732-4.767 2.328-1.849 0.636-3.71 0.893-5.655 1.141-1.169 0.146-2.198 0.685-3.407 0.685-0.591 0-1.079-0.298-1.658-0.338-1.872-0.107-3.643-0.612-5.486-1.107-1.844-0.495-3.632-0.938-5.307-1.781-0.517-0.259-1.09-0.247-1.602-0.54L619.354 596.323H456.226c-62.093 0-112.428-50.334-112.428-112.428V202.824c0-62.093 50.334-112.428 112.428-112.428h393.499c62.093 0 112.428 50.334 112.428 112.428v281.07c0 62.094-50.334 112.429-112.428 112.429z m56.214-393.499c0-31.047-25.167-56.214-56.214-56.214H456.225c-31.047 0-56.214 25.167-56.214 56.214v281.07c0 31.047 25.167 56.214 56.214 56.214H628.24l0.545 0.321c4.16 0.275 8.303 1.22 12.154 3.446l152.572 88.087v-63.747c0-15.52 12.586-28.107 28.107-28.107h28.107c31.047 0 56.214-25.167 56.214-56.214v-281.07z m-84.321 168.642c-15.52 0-28.107-12.586-28.107-28.107 0-15.52 12.586-28.107 28.107-28.107s28.107 12.586 28.107 28.107c0 15.521-12.586 28.107-28.107 28.107z m-168.642 0c-15.52 0-28.107-12.586-28.107-28.107 0-15.52 12.586-28.107 28.107-28.107 15.52 0 28.107 12.586 28.107 28.107 0 15.521-12.587 28.107-28.107 28.107z m-168.643 0c-15.52 0-28.107-12.586-28.107-28.107 0-15.52 12.586-28.107 28.107-28.107s28.107 12.586 28.107 28.107c0 15.521-12.586 28.107-28.107 28.107z m-365.391 56.213v281.071c0 31.047 25.167 56.214 56.214 56.214h28.107c15.52 0 28.107 12.586 28.107 28.107v63.747l152.572-88.087c3.85-2.227 7.994-3.171 12.154-3.446l0.545-0.321h172.015c31.047 0 56.214-25.167 56.214-56.214h56.214c0 62.093-50.334 112.428-112.428 112.428H405.526L217.315 929.84c-0.512 0.293-1.085 0.281-1.602 0.54-1.675 0.843-3.463 1.287-5.307 1.781-1.844 0.495-3.615 1-5.486 1.107-0.579 0.039-1.068 0.338-1.658 0.338-1.208 0-2.238-0.54-3.407-0.685-1.945-0.247-3.805-0.506-5.655-1.141-1.72-0.596-3.215-1.428-4.767-2.328-1.552-0.893-3.024-1.777-4.396-2.968-1.478-1.282-2.631-2.76-3.817-4.323-0.713-0.938-1.698-1.563-2.299-2.609-0.18-0.315 0.034-0.681-0.135-1-2.119-3.952-3.632-8.252-3.632-13.053v-84.322c-62.093 0-112.428-50.334-112.428-112.428V427.676c0-62.093 50.334-112.428 112.428-112.428h112.428v56.214H175.156c-31.047 0-56.214 25.167-56.214 56.214z"
            fill="" p-id="6286"></path>
        </svg>
        <router-link to="/">联系我们</router-link>
      </span>
    </div>
  </div>
</template>

<style lang='scss'>
body {
  margin: 0;
  padding: 0;
}

.box {
  background: #76c5f0;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .logo {
    background-image: url('@/assets/404/404-1.webp');
    background-repeat: no-repeat;
    width: 1000px;
    height: 494px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .info {
    font-family: '新宋体';
    font-size: 3rem;
    margin-top: 3rem;
    display: flex;

    span {
      margin: 0 3rem;
      cursor: pointer;
      display: flex;
      align-items: center;

      &:hover {
        a {
          color: white;
          text-decoration: none;
        }

        path {
          fill: white;
        }
      }

      a {
        color: #000;
        text-decoration: none;
      }
    }
  }
}
</style>
